<template>
	<!-- 第二部分 -->
	<view class="two">
		<view class="nian">近一年</view>
		<view @click="showPicker" class="pickerStyle">{{chooseDate}}</view>
		<rangeDatePick :show="isShow" @showchange="showchange" :start="start" :end="end" :value="value"
			@change="bindChange" @cancel="bindCancel" themeColor="#4C83D6" fields="day"></rangeDatePick>
	</view>

</template>


<script>
	import rangeDatePick from '@/components/pyh-rdtpicker/pyh-rdtpicker.vue';
	export default {
		components: {
			rangeDatePick
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				nowDate: currentDate, //获取当前时间
				isShow: false,
				value: [],
				chooseDate: "选择时间 >",
				start: "1900-01-01",
				end: "2200-12-01",
				type: "default",
				inverted: false,
			}
		},
		methods: {
			showPicker(e) {
				this.isShow = true
			},
			showchange() {
				this.isShow = !this.isShow;
			},
			bindChange(data) {
				console.log(data)
				this.chooseDate = data[0] + "至" + data[1]
			},
			bindCancel(e) {
				console.log(e)
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			setType() {
				let types = ["default", "primary", "success", "warning", "error"];
				let index = types.indexOf(this.type);
				types.splice(index, 1);
				let randomIndex = Math.floor(Math.random() * 4);
				this.type = types[randomIndex];
			},
			setInverted() {
				this.inverted = !this.inverted;
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			}
		},
		onLoad() {
			//模拟修改start和end
			setTimeout(() => {
				this.start = "2000-01-01";
				this.end = "2022-01-01"
			}, 4000)
		}
	}
</script>

<style lang="scss">
	// @import url('@/static/images/font_u2zmjfxyr4n/iconfont.css');
	.pickerStyle {
		width: 240rpx;
		height: 60rpx;
		background-color: #e4f0ff;
		color: #569fff;
		font-size: 30rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 30rpx;
		display: inline-block;
		margin-left: 50rpx;
	}

	.nian {
		display: inline-block;
		margin-left: 26rpx;
		width: 150rpx;
		height: 60rpx;
		color: #fff;
		background-color: #006eff;
		font-size: 30rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 30rpx;
	}
</style>
